<template>
    <div>
        <div id="myChartbox">

        </div>
    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import { getmapJson } from '../request/api';

let myChart;

let mapArr = [
    {
        adcode: 100000,
        name: '中国'
    }
]

let mapData = [
    { name: '黑龙江省', value: [126.642464, 45.756967,111] },
    { name: "山西省", value: [112.549248, 37.857014,111] },
    { name: "江西省", value: [115.892151, 28.676493,123] },
    { name: "内蒙古自治区", value: [111.670801, 40.818311,133] },
    { name: "湖北省", value: [114.298572, 30.584355,122] }
]
let mapDa = [
    { name: '黑龙江省', value: 111 },
    { name: "山西省", value: 112},
    { name: "江西省", value: 115},
    { name: "内蒙古自治区", value: 133 },
    { name: "湖北省", value: 114 }
]

const mapfun = (adcode: any, name: any) => {

    getmapJson(adcode).then(res => {
        console.log(res)
        myChart = echarts.init(document.getElementById("myChartbox"))
        echarts.registerMap(name, res.data);
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },

            visualMap: {
                min: 8,
                max: 50,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            geo: {
                map: name,
                show: true,
                roam: false,// 允许缩放和平移
                zoom: 1, // 设置地图的缩放级别，1.0为默认大小
                itemStyle: {
                    // areaColor:['#87cefa', '#ffff00', '#ff4500'],
                    areaColor: '#87cefa',
                    borderColor: '#fff'
                },
                label: {
                    emphasis: {
                        show: true
                    }
                },
            },
            dataZoom: [
                {
                    type: 'inside', // Inside zoom
                    xAxisIndex: [0], // Applies to xAxis
                    zoomLock: true // Prevents zoom out beyond initial
                },
                {
                    type: 'slider', // Slider zoom
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ],
            series: [
                // 散点
                {
                    name: '散点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: res.data.features.map((item: any) => {
                        return {
                            // name: item.properties.name,
                            value: item.properties.center,
                        }
                    }),
                    itemStyle: {
                        color: '#05C3F9'
                    }
                },

                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin', //气泡
                    symbolSize: function (val: any) {
                        // console.log(val,'pin')
                        if (val) {
                            return val[2] / 4 + 20;
                        }
                    },
                    label: {
                        show: true,
                        formatter: '{b}',
                        color: '#fff',
                        fontSize: 9,
                    },
                    itemStyle: {
                        color: '#ff4500', //标志颜色
                    },
                    zlevel: 6,
                    data: mapData,
                },

                // 动态气泡
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: res.data.features.map((item: any) => {

                          let  name=item.properties.childrenNum;
                            let value= item.properties.center;
                            if(name<15){
                                return item
                            }
                            return {
                                name,value
                            }
                    }),
                    symbolSize: 13,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    itemStyle: {
                        color: 'yellow',
                        shadowBlur: 10,
                        shadowColor: 'yellow'
                    },
                    zlevel: 1
                },
                // 地图数据
                {
                    name: name,
                    // type: 'map',
                    map: name,
                    label: {
                        show: false
                    },
                    data: res.data.features.map((item: any) => {
                        return {
                            name: item.properties.name,
                            value: item.properties.childrenNum,
                            adcode: item.properties.adcode
                        }
                    }),
                    nameMap: {
                        'Central and Western': '中西区',
                        Eastern: '东区',
                        Islands: '离岛',
                        'Kowloon City': '九龙城',
                        'Kwai Tsing': '葵青',
                        'Kwun Tong': '观塘',
                        North: '北区',
                        'Sai Kung': '西贡',
                        'Sha Tin': '沙田',
                        'Sham Shui Po': '深水埗',
                        Southern: '南区',
                        'Tai Po': '大埔',
                        'Tsuen Wan': '荃湾',
                        'Tuen Mun': '屯门',
                        'Wan Chai': '湾仔',
                        'Wong Tai Sin': '黄大仙',
                        'Yau Tsim Mong': '油尖旺',
                        'Yuen Long': '元朗'
                    }

                },

            ]
        }
        myChart.setOption(option)

        // 取消点击
        myChart.off('click', onclick)
        // 取消右击
        myChart.off('contextmenu', oncontextmenu)

        // 点击下钻
        myChart.on('click', function (e: any) {
            mapArr.push({
                adcode: e.data.adcode,
                name: e.data.name
            })
            mapfun(e.data.adcode, e.data.name)
        })

        // 右击返回
        myChart.on('contextmenu', function (e: any) {
            mapArr.pop()
            if (mapArr.length > 0) {
                mapfun(mapArr[mapArr.length - 1].adcode, mapArr[mapArr.length - 1].name)
            } else {
                mapfun(100000, '中国')
            }
        })

    }).catch(err=>{
        console.error(err)
    })
}

onMounted(() => {
    mapfun(100000, '中国')
})


</script>

<style lang="scss" scoped>
#myChartbox {
    width: 800px;
    height: 550px;
    // background-color: #ff4500;
}
</style>